<script setup lang="ts">
import { useConfigKeyZTB, useLogout } from '@fl/api/bidding-api/current'
import { clearToken } from '@fl/logics/authentication'
import { useUserStore } from '@fl/store/modules/user'

import caigouren from '/assets/home/caigouren.png'
import gongyinglianfuwu from '/assets/home/gongyinglianfuwu.png'
import gongyingshang from '/assets/home/gongyingshang.png'
import pingshenzhuanjia from '/assets/home/pingshenzhuanjia.png'

const userStore = useUserStore()

const { refetch: logout } = useLogout()
const { data: ztbUrl } = useConfigKeyZTB()
function nonOpen() {
    ElMessage.warning('暂未开放，敬请期待')
}

async function handler(category) {
    if (userStore.userInfo === undefined) {
        window.location.href = ztbUrl.value.msg
        return
    }
    if (userStore.userInfo.userTypeCategory === category) {
        return
    }
    await loginOut()
}
async function loginOut() {
    await logout()
    clearToken()
    userStore.setUserInfo(undefined)
    window.location.href = ztbUrl.value.msg
}
</script>

<template>
    <div class="container">
        <h1 class="font-size-22 font-bold">
            登录/注册入口
        </h1>

        <el-divider />

        <div class="images flex justify-around">
            <div class="box"
                 @click="handler('采购人')"
            >
                <el-image :src="caigouren" />

                <span>采购人</span>
            </div>

            <div class="box"
                 @click="handler('供应商')"
            >
                <el-image :src="gongyingshang" />

                <span>供应商</span>
            </div>

            <div class="box"
                 @click="nonOpen"
            >
                <el-image :src="pingshenzhuanjia" />

                <span>评审专家/招标人代表</span>
            </div>
        </div>

        <h1 class="mt-20 font-size-22 font-bold">
            供应链服务中心
        </h1>

        <el-divider />

        <el-image class="h-200 w-[100%]"
                  :src="gongyinglianfuwu"
                  @click="nonOpen"
        />
    </div>
</template>

<style scoped lang="less">
.container {
    .images {
        display: flex;

        .box {
            width: 100px;
            height: 107px;
            padding: 20px;
            background: #fff6f1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin: 10px;
            align-items: center;

            &:nth-child(3) {
                flex: 1;
            }

            .el-image {
                width: 40px;
                height: 40px;
            }
        }
    }
}
</style>
